<template>
  <div class="user_center">
    <div class="intro_box" ref="img"></div>
    <p>{{$store.state.username || '没有昵称'}}</p>
    <div class="btn">
      <button @click="toCenter">个人中心</button>
      <button @click="toMy">退出</button>
    </div>
  </div>
</template>

<script>
import { goOut } from 'com/shuju'
export default {
  name: 'UserIntro',
  data () {
    return {
      img: require('@/assets/images/touxiang.gif')
    }
  },
  methods: {
    toMy () {
      this.$parent.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
      var tf = confirm('是否退出登录?')
      if (tf) {
        this.$store.commit('changeUserCenter', false)
        this.$store.commit('saveuser', '1')
        this.$store.commit('getNowUserIntro', {})
        goOut(this)
      }
    },
    toCenter () {
      this.$parent.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
      this.$store.commit('changeUserCenter', false)
      this.$router.push({
        path: '/userCenter/user',
        query: {
          name: this.$store.state.nowUserIntro.username
        }
      })
      // console.log(this.$store.state.nowUserIntro.username)
    }
  },
  mounted () {
    this.$refs.img.style.backgroundImage = 'url(' + (this.$store.state.nowUserIntro.avatar || this.img) + ')'
    this.$refs.img.style.backgroundRepeat = 'no-repeat'
    this.$refs.img.style.backgroundSize = '100% 100%'
  }
}
</script>

<style lang="stylus" scoped>
  .user_center{
    width: 280px
    height: 230px
    right: 0
    z-index: 100
    top: 79px
    position: absolute
    background: rgb(15,151,213)
    .intro_box{
      margin: auto
      margin-top: .2rem
      height: 100px
      width: 100px
      border-radius: 50%
    }
    p{
      text-align: center
      color: rgb(255,255,255)
      font-size: .5rem
      margin-top: .2rem
    }
    .btn{
      position: relative
      bottom: -7px
      width: 100%
      height: 60px
      background: rgb(245,245,253)
      button{
        cursor: pointer
        position: absolute
        width: 100px
        height: 40px
        bottom: 10px
        border: 1px splid rgb(240,240,240)
        outline: none
      }
      button:first-child{
        left: 10px
      }
      button + button{
        right: 10px
      }
    }
  }
</style>
